<template>
  <div class="main-content">
    <h3>课程发布</h3>
    <div class="step-content">
      <el-steps :active="active" finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="课程大纲"></el-step>
        <el-step title="最终发布"></el-step>
      </el-steps>
      <router-view/>
      <el-button style="margin-top: 12px;" @click="next"
                 v-if="this.$route.fullPath !== '/dashboard/subjectupload/2' && this.$route.fullPath !== '/dashboard/subjectupload/3'"
                 class="btn-next" type="primary">下一步</el-button>
      <el-button style="margin-top: 12px;" @click="backSubjectList" v-if="this.$route.fullPath === '/dashboard/subjectupload/2'" type="primary">保存修改</el-button>
      <el-button style="margin-top: 12px;" @click="next" v-if="this.$route.fullPath === '/dashboard/subjectupload/2'" type="danger">确认发布</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "SubjectUpload",
    data() {
      return {
        active: 0,
        currentPage: 1,
        // isDisabled: false,
      };
    },

    methods: {
      next() {
        this.$router.push(`/dashboard/subjectupload/${this.currentPage % 4}`).catch(() => {})
        // console.log(this.$route);
        if (this.$route.meta.success){
          this.active ++
          this.currentPage ++
          // if (this.currentPage === 3)
          //   this.isDisabled = true
        }else{
          console.log('未通过验证')
        }
        //当前页面不等于currentPage则不进行跳转
      },
      //TODO 优化版next
      nextRoute(){

      },
      backSubjectList(){
        this.$router.push('/dashboard/subjectlist')
      }
    }
  }
</script>

<style scoped>
  .main-content{
    padding: 0 36px;
  }
  .step-content{
    margin: 20px auto;
    width: 1000px;
  }
  .btn-next{
    margin-left: 18%;
  }
</style>
